import {
  IonContent,
  IonPage,
  IonInput,
  IonItem,
  IonButton,
  IonRow,
  IonCol,
  IonList,
  IonText,
  IonAlert,
  IonIcon
} from '@ionic/react';
import React, { useState } from 'react';
import global_variable from '../shared/global_variable.json';
import { person, key,logIn } from 'ionicons/icons';

const Home: React.FC = () => {

  const [username, setUsername] = useState('');
  let [password, setPassword] = useState('');
  const [showAlert1, setShowAlert1] = useState(false);
  const [showAlert2, setShowAlert2] = useState(false);

  const login = async (e: React.FormEvent) => {
    e.preventDefault();

    if (username && password) {
      var url = global_variable.url + "/CustomerAccountsApp/GetAll";
      // 请求数据
      var urls = url + "?Filter=&NameFilter=" + username + "&EmailFilter=&PhoneNumFilter=&PassWordFilter=" + password + "&SkipCount=0&MaxResultCount=10";
      let data = {
        method: 'GET'
      };
      fetch(urls, data)
        .then(response => response.json())
        .then(responseJson => {
          if (responseJson.result.totalCount > 0) {
            document.cookie = "userid=" + responseJson.result.items[0].customerAccount.id;
            window.location.href = global_variable.clientUrl + "/Home";
          }
          else
            // alert("账号或密码错误");
            setShowAlert1(true);
        })
    }
    else if (!username || !password) {
      setShowAlert2(true);
    };
  };


  return (
    <IonPage id="login-page">
      <IonContent>
        <form noValidate onSubmit={login}>
          {/* 提示框 */}
          <IonAlert
            isOpen={showAlert1}
            onDidDismiss={() => setShowAlert1(false)}
            header={'提示'}
            message={'账号或密码有误!'}
            buttons={['确定']}
          />
          <IonAlert
            isOpen={showAlert2}
            onDidDismiss={() => setShowAlert2(false)}
            header={'提示'}
            message={'账号或密码不能为空!'}
            buttons={['确定']}
          />
          <div style={{
            color: 'darkgray',
            fontFamily: 'fantasy',
            fontSize: '18px',
            textAlign: 'center',
            marginTop: '30%',
            marginBottom: '15%'
          }}>
            Dyan.PlatformSystem<br />
            欢迎登陆
          </div>
          <IonList>
            <IonItem>
              <IonIcon icon={person} />
              <IonInput name="username" type="text" value={username} onIonChange={e => setUsername(e.detail.value!)}
                required>
              </IonInput>
            </IonItem>
            <IonText color="danger"></IonText>
            <IonItem>
              <IonIcon icon={key} />
              <IonInput name="password" value={password} type="password" onIonChange={e => setPassword(e.detail.value!)}>
              </IonInput>
            </IonItem>
            <IonText color="danger"></IonText>
          </IonList>
          <IonRow style={{ fontSize: '12px' }}>
            <IonCol style={{ marginLeft: '5%' }}>
              <a href="/forgotPwd">忘记密码？</a>
            </IonCol>
            <IonCol>
              还没有账号？<a href="/account">点击注册</a>
            </IonCol>
          </IonRow>
          <IonRow>
            <IonCol>
              <IonButton type="submit" expand="block">登录</IonButton>
            </IonCol>
          </IonRow>
        </form>
      </IonContent>
    </IonPage>
  );
};

export default Home;
